<script lang="ts" setup>
import { getPatientDetailAPI } from '@/apis/patient'
import { payConsultOrderAPI, preConsultOrderAPI, saveConsultOrder } from '@/apis/quickEntry'
import useConsultStore from '@/stores/consult'
import type { PatientList } from '@/types/patient'
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { PreConsultOrderRes } from '@/types/quickEntry'
import CustomPayment from '@/components/custom-payment/custom-payment.vue'
const props = defineProps<{
  patientId: string
}>()
const store = useConsultStore()
onReady(() => {
  store.patientId = props.patientId
  console.log('store.illnessInfo', store.illnessInfo)
  preConsultOrder()
  getPatientInfo()
})
// 问诊价格
const paymentDetail = ref<PreConsultOrderRes>({} as PreConsultOrderRes)
const preConsultOrder = async () => {
  const res = await preConsultOrderAPI({
    type: store.illnessInfo.type as number,
    illnessType: store.illnessInfo.illnessType as number,
  })
  paymentDetail.value = res.data
  // console.log('res', res)
}
// 患者信息
const patientInfo = ref<PatientList>({} as PatientList)
const getPatientInfo = async () => {
  const res = await getPatientDetailAPI(props.patientId)
  patientInfo.value = res.data
}
// 问诊-保存/修改问诊订单
const orderId = ref()
const docId = ref()
const customPayment = ref<UniHelper.UniPopupInstance>({} as UniHelper.UniPopupInstance)
const paymennt = async () => {
  if (orderId.value) {
    return uni.showToast({ title: '订单不能重复创建！', icon: 'error' })
  }
  const res = await saveConsultOrder({
    patientId: props.patientId,
    type: store.illnessInfo.type as number,
    illnessType: store.illnessInfo.illnessType as number,
    illnessDesc: store.illnessInfo.illnessDesc,
    pictures: store.illnessInfo.pictures,
    illnessTime: store.illnessInfo.illnessTime as number,
    depId: store.illnessInfo.depId,
  })

  orderId.value = res.data.id
  store.orderId = orderId.value
  // console.log('orderId', orderId.value)
  // 打开支付弹层
  customPayment.value?.open?.()
  // 清空store
  // store.clear()
}
const close = async () => {
  const res = await uni.showModal({
    title: '关闭支付',
    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
    cancelText: '仍要关闭',
    cancelColor: '#848484',
    confirmText: '继续支付',
    confirmColor: '#16C2A3',
  })
  if (res.cancel) {
    customPayment.value?.close?.()
  } else {
    return
  }
}
const handleChange = (index: number) => {
  console.log('index', index)
}
const handleConfirm = async (index: number) => {
  if (index === 0) {
    return uni.showToast({ title: '微信支付暂不支持', icon: 'none' })
  } else {
    const res = await payConsultOrderAPI({
      orderId: store.orderId,
      paymentMethod: index.toString(),
      payCallback: 'http://localhost:5173/#/subpkg_consult/room/room',
    })
    location.href = res.data.payUrl
  }
}
</script>

<template>
  <scroll-view>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${paymentDetail?.payment ?? 0}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${paymentDetail?.couponDeduction ?? 0}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ paymentDetail?.pointDeduction ?? 0 }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ paymentDetail?.actualPayment ?? 0 }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientInfo?.name }} | {{ patientInfo?.gender }} | {{ patientInfo?.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ paymentDetail?.payment ?? 0 }}</text>
      </view>
      <button class="uni-button" @click="paymennt">立即支付</button>
    </view>
    <CustomPayment
      ref="customPayment"
      v-if="paymentDetail?.actualPayment"
      :account="paymentDetail?.actualPayment"
      :order-id="store.orderId"
      @close="close"
      @change="handleChange"
      @confirm="handleConfirm"
    />
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
